<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/vue/vue.min.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/laypage/laypage.js" charset="utf-8"></script>
<script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>HTML:{$Think.session.user.uname}Session:session('user.uname')
测试登录用户:${user.uname}
	<div id="app" class="container">
		<form class="form-inline bg-danger" role="form">			
		  查询条件：
		  <div class="form-group">
		    <label class="sr-only" for="gname">商品名称</label>
		    <input type="text" class="form-control" id="gname" placeholder="商品名称">
		  </div>
		  <div class="form-group">
		    <label class="sr-only" for="gprice">商品价格</label>
		    <input type="text" class="form-control" id="gprice" placeholder="商品价格">
		  </div>
		  <button type="button" id="findGoods" class="btn btn-success">查询商品</button>
		  <button type="button" id="addGoodBtn" class="btn btn-danger">增加商品</button>
		</form>
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr class="success" align="center">
						<td>商品编号</td>
						<td>商品ID</td>
						<td>商品名称</td>
						<td>商品价格</td>
						<td>生产日期</td>
						<td colspan=2>商品操作</td>
					</tr>
				</thead>
				
				<tbody>
					<tr class="active" v-for="(item,index) in result" align="center">
						<td>{{index+1}}</td>
						<td>{{item.gid}}</td>
						<td>{{item.gname}}</td>
						<td>{{item.gprice}}</td>
						<td>{{item.prodate}}</td>
						<td><a href="#" @click="editEvent(item.gid)">编辑</a>
						<a href="#" @click="delEvent(item.gid)">删除</a></td>
					</tr>
				</tbody>
			</table>
			<div id="pagenav"></div>
		</div>
	</div>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				result:[]
			}
		});
		
		var getGoodsPageList=function(curr){
			$.ajax({
				type:"GET",
				dataType:"json",
				url:"/goods/getAllGoods",
				data:{
					curPageNum:curr||1,
					pageSize:10,
					"gname":$("#gname").val()
				},
				success:function(msg){
					//alert(msg.result);
					app.result=msg.result;
					laypage({
						cont:'pagenav',
						pages:msg.totalPage,
						first:true,
						last:true,
						curr:curr||1,
						jump:function(obj,first){
							if(!first){
								getGoodsPageList(obj.curr);
							}
						}
					});
				}
			});
			
		}
		getGoodsPageList();
		
		
		//查询商品
		$('#findGoods').on('click',function(){
			getGoodsPageList();
		});
		//增加商品事件
		$('#addGoodBtn').on('click', function() {
			
			layer.open({
				type : 2,
				title : '添加商品',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : 'goods_add.html',
				end : function() {
					getGoodsPageList();
				}
			});
			
		});
		
		//删除用户事件
		var delEvent = function(gid) {
			//询问框
			layer.confirm('您确定要删除么？', {
				btn : [ '是', '否' ]
			//按钮
			}, function() {
					//是
					$.ajax({
						type : "GET",
						dataType : "json",
						url : "/goods/delGoods",
						data : {
							gid:gid
						},
						success : function(msg) {
							//alert(msg);
							getGoodsPageList();
							layer.msg('已经成功删除记录' + gid,{icon:5});
						}
					});
	
			}, function() {
				//否
			});
		}
		
		//编辑用户事件
		var editEvent = function(gid) {
			layer.open({
				type : 2,
				title : '编辑商品',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/goods/getGoodsOne?gid='+gid,
				end : function() {
					getGoodsPageList();
				}
			});
		}
	</script>
</body>
</html>